<template>
	<view class="conter">
		<!-- 点击跳转 -->
		<view class="click_to">
			<view @click="goduck" class="duckyaya">
				<image :src="imgUrl+'/static/images/duckyaya.png'" mode=""></image>
			</view>
			<view @click="gogold" class="duckyaya">
				<image :src="imgUrl+'/static/images/goldyaya.png'" mode=""></image>
			</view>
			<view @click="goegg" class="duckyaya">
				<image :src="imgUrl+'/static/images/markgoegg.png'" mode=""></image>
			</view>
		</view>
		<!-- 点击跳转 -->
		<!-- 近期购买 -->
		<view class="conmter" v-if="show">
			<view class="tit">近期购买</view>
			<view class="u_tabs">
				<u-tabs :current="current" style="text-align: center; line-height: 50rpx" lineWidth="0" :activeStyle="{
						borderRadius: '14rpx',
						width: '120rpx',
						height: '48rpx',
						color: '#46a6f8',
						fontSize: '25rpx',
						backgroundColor: '#130F26'
					}" :inactiveStyle="{
						borderRadius: '14rpx',
						backgroundColor: '#130F26',
						width: '120rpx',
						height: '48rpx',
						color: '#8A92A3',
						fontSize: '25rpx'
					}" :list="list1" :is-scroll="false" @click="click"></u-tabs>
			</view>
			<swiper :current="current" @change="changeSwiper" duration="300">
				<swiper-item>
					<view v-if="current == 0" class="duck_box" v-for="(item, index) in duckList" :key="index">
						<view class="mon-body-box" :style="{ animationDelay: index * 0.1 + 's' }">
							<view class="times-box-left">{{ index + 1 }}</view>
							<view class="birthNumber">
								<view class="times-box-img">
									<u--image width="100rpx" height="100rpx" radius="14rpx"
										:src="imgUrl + item.monImage"></u--image>
									<view class="it_number">
										{{item.number}}
									</view>
								</view>
								<view class="price">
									<view>￥{{ item.price.toFixed(2) }}</view>
									<view
										style="color: #8A92A3; font-size: 21rpx; margin-top: 10rpx; font-weight: normal">
										{{ item.birthNumber }}/5
									</view>
								</view>
							</view>
							<view style="color: #fff; font-size: 24rpx;">
								{{ item.buyerName}}
							</view>
							<view class="bummont">
								{{ item.momentAgo }}
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view v-if="current == 1" class="duck_box" v-for="(item, index) in TimeSandsRecord" :key="index">
						<view class="mon-body-box" :style="{ animationDelay: index * 0.1 + 's' }">
							<view class="times-box-left">{{ index + 1 }}</view>
							<view class="birthNumber">
								<view class="times-box-img">
									<u--image width="100rpx" height="100rpx" radius="14rpx"
										:src="imgUrl + item.image"></u--image>
								</view>
								<view class="price">
									￥{{ item.unitPrice.toFixed(2) }} * {{ item.amount }}
								</view>
							</view>
							<view style="color: #fff; font-size: 24rpx;">
								{{ item.buyer }}
							</view>
							<view class="bummont">
								{{ item.time }}
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 近期购买 -->
	</view>
</template>
<script>
	import config from '@/config';
	import {
		getMonRecently,
		getRecentTimeSandsRecord
	} from '../../api/work/market.js';
	export default {
		data() {
			return {
				show: true,
				duckList: [],
				TimeSandsRecord: [],
				imgUrl: config.imgUrl,
				list1: [{
						name: 'Duck'
					},
					{
						name: '金豆'
					}
				],
				current: 0
			};
		},
		created() {
			this.getMonList();
			this.getRecentTimeSands();
		},
		onHide() {
			this.show = true;
		},
		onShow() {
			this.show = true;
		},
		methods: {
			click: async function(val) {
			  this.current = val.index;
			  if (this.current == 0) { // 如果用户选择了 'Duck'
			    await this.getMonList(); // 获取 'Duck' 数据
			  } else if (this.current == 1) { // 如果用户选择了 '金豆'
			    await this.getRecentTimeSands(); // 获取 '金豆' 数据
			  }
			},
			// duck详情
			async getMonList() {
				this.duckList = [];  // 清空列表数据
				const res = await getMonRecently();
				this.duckList = res.data;
				
			},
			// duck详情
			// 金豆详情
			async getRecentTimeSands() {
				this.TimeSandsRecord = [];  // 清空列表数据
				const res = await getRecentTimeSandsRecord();
				this.TimeSandsRecord = res.data;
			},
			// 金豆详情
			changeSwiper(event) {
				this.current = event.detail.current;
			},
			// tabs
			goduck() {
				uni.navigateTo({
					url: '/pages/market/duck'
				});
			},
			gogold() {
				uni.navigateTo({
					url: '/pages/market/gold'
				});
			},
			goegg() {
				uni.navigateTo({
					url: '/pages/market/duckEgg'
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	::v-deep .uni-swiper-wrapper {
		width: 100%;
		height: 1490rpx !important;
	}

	// 动画效果
	::v-deep .u-tabs__wrapper__nav__item {
		padding: 0 !important;
		margin-right: 30rpx !important;
	}

	.mon-body-box {
		opacity: 0;
		transform: translateX(100%);
		animation: slideInRight 0.5s ease-out forwards;
	}

	/* Animation keyframes */
	@keyframes slideInRight {
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	// 动画效果
	.conter {
		padding: 80rpx 34.88rpx 0;

		.it_number {
			display: flex;
			align-items: center;
			height: 22rpx;
			color: #FFFFFF;
			bottom: 15rpx;
			font-size: 14rpx;
			margin-left: 5rpx;
			font-family: "font";
			font-weight: 500;
			position: absolute;
			padding: 0 8rpx 0 8rpx;
			background-color: #fff;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 152rpx 152rpx 152rpx 152rpx;
		}

		// 近期 购买
		.conmter {
			width: 680rpx;
			border-radius: 14rpx;
			padding: 0 0 20rpx 0;

			.tit {
				color: #ffffff;
				font-size: 35rpx;
				font-weight: 800;
				font-family: 'font';
				padding: 34.88rpx 0 0 0;
			}

			.u_tabs {
				padding: 15rpx 0rpx;
			}

			.duck_box {
				width: 680rpx;

				.mon-body-box {
					width: 680rpx;
					height: 122rpx;
					display: flex;
					background: #15132A;
					margin: 0 0 18rpx 0;
					align-items: center;
					border-radius: 14rpx;
					justify-content: space-between;
				}

				.times-box-left {
					width: 35rpx;
					color: #FFFFFF;
					font-size: 28rpx;
					font-weight: 700;
					font-family: "font";
					margin-left: 48rpx;

				}

				.birthNumber {
					display: flex;
					height: 115rpx;
					border-radius: 17rpx;
					align-items: center;
					background: rgba(99, 99, 99, 0.05);

					.price {
						width: 200rpx;
						color: #ffffff;
						text-align: center;
					}
				}

				.bummont {
					width: 180rpx;
					text-align: center;
					color: #8A92A3;
					font-size: 21rpx;
					font-family: "font";
					font-weight: 500;
				}
			}
		}

		// 近期 购买
		// 点击跳转
		.click_to {
			width: 680rpx;

			.duckyaya {
				width: 680rpx;
				height: 140rpx;
				margin-top: 27.91rpx;

				image {
					width: 680rpx;
					height: 140rpx;
				}
			}
		}

		// 点击跳转
	}
</style>